<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="theme-color">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="__PUBLIC__/apps/css/reset.css">
    <link rel="stylesheet" href="__PUBLIC__/apps/css/index.css">
    <link rel="stylesheet" href="__PUBLIC__/apps/css/find.css">
    <link rel="stylesheet" href="__PUBLIC__/apps/css/swiper-3.4.2.min.css">
    <script src="__PUBLIC__/apps/js/jquery-3.1.1.min.js"></script>
    <script src="__PUBLIC__/apps/js/swiper-3.4.2.jquery.min.js"></script>
    <title>　金蚂蚁装修网</title>

    <script>!function (e, t) { function i() { var t = r.getBoundingClientRect().width; (function () { for (var e = navigator.userAgent, t = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"), i = !0, a = 0; a < t.length; a++)if (e.indexOf(t[a]) > 0) { i = !1; break } return i })() && t < 2047 && (t = t > 540 ? 540 : t); var i = t / 7.5; r.style.fontSize = i + "px", s.rem = e.rem = i } var a, n = e.document, r = n.documentElement, o = n.querySelector('meta[name="viewport"]'), d = n.querySelector('meta[name="flexible"]'), l = 0, m = 0, s = t.flexible || (t.flexible = {}); if (o) { console.warn("将根据已有的meta标签来设置缩放比例"); var p = o.getAttribute("content").match(/initial\-scale=([\d\.]+)/); p && (m = parseFloat(p[1]), l = parseInt(1 / m)) } else if (d) { var c = d.getAttribute("content"); if (c) { var u = c.match(/initial\-dpr=([\d\.]+)/), f = c.match(/maximum\-dpr=([\d\.]+)/); u && (l = parseFloat(u[1]), m = parseFloat((1 / l).toFixed(2))), f && (l = parseFloat(f[1]), m = parseFloat((1 / l).toFixed(2))) } } if (!l && !m) { e.navigator.appVersion.match(/android/gi); var v = e.navigator.appVersion.match(/iphone/gi), h = (e.navigator.appVersion.match(/ipad/gi), e.devicePixelRatio); m = 1 / (l = v ? h >= 3 && (!l || l >= 3) ? 3 : h >= 2 && (!l || l >= 2) ? 2 : 1 : 1) } if (r.setAttribute("data-dpr", l), !o) if ((o = n.createElement("meta")).setAttribute("name", "viewport"), o.setAttribute("content", "initial-scale=" + m + ", maximum-scale=" + m + ", minimum-scale=" + m + ", user-scalable=no"), r.firstElementChild) r.firstElementChild.appendChild(o); else { var g = n.createElement("div"); g.appendChild(o), n.write(g.innerHTML) } e.addEventListener("resize", function () { clearTimeout(a), a = setTimeout(i, 300) }, !1), e.addEventListener("pageshow", function (e) { e.persisted && (clearTimeout(a), a = setTimeout(i, 300)) }, !1), "complete" === n.readyState ? n.body.style.fontSize = 14 * l + "px" : n.addEventListener("DOMContentLoaded", function (e) { n.body.style.fontSize = 14 * l + "px" }, !1), i(), s.dpr = e.dpr = l, s.refreshRem = i, s.rem2px = function (e) { var t = parseFloat(e) * this.rem; return "string" == typeof e && e.match(/rem$/) && (t += "px"), t }, s.px2rem = function (e) { var t = parseFloat(e) / this.rem; return "string" == typeof e && e.match(/px$/) && (t += "rem"), t } }(window, window.lib || (window.lib = {}))


    </script>
</head>
<body>
<div class="Picture">
    <div class="nav">
        <a href="{:U('Index/index' )}">
            <首页</a>

    </div>

    <ul class="style_nav clearfix">
        <li class="on">
            <a href="{:U('Image/list')}"><p>风格</p></a>
            <span></span>
        </li>
        <li>
            <a href="{:U('Image/jubu')}"><p>局部</p></a>
            <span></span>
        </li>
    </ul>
    <div class="title">
        <div  class=" topNav swiper-container swiper-container-horizontal swiper-container-free-mode">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="{:U('Image/list')}"><span>简约</span></a>
                </div>

                <div class="swiper-slide">
                    <a href="{:U('Image/f_zhongshi')}"> <span>中式</span></a>
                </div>
                <div class="swiper-slide">
                    <a href="{:U('Image/f_oushi')}"><span>欧式</span></a>
                </div>
                <div class="swiper-slide">
                    <a href="{:U('Image/f_meishi')}"><span>美式</span></a>
                </div>
                <div class="swiper-slide active swiper-slide-active">
                    <a href="{:U('Image/f_xingudian')}"><span>新古典</span></a>
                </div>
                <div class="swiper-slide">
                    <a href="{:U('Image/f_tianyuan')}"><span>田园</span></a>
                </div>
                <div class="swiper-slide">
                    <a href="{:U('Image/f_dizhonghai')}"><span>地中海</span></a>
                </div>

            </div>
        </div>
    </div>
    <aside class="fall-box grid">
        <foreach name="arr" item="v">
            <div class="grid-item item">
                <a href="{:U('Image/deatil',array('id'=>$v['id']))}">
                    <img src="__PUBLIC__/images/{$v.imagename}" class="item-img" />
                    <section class="section-p">
                        <p>{$v.title}</p>

                    </section>
                </a>
            </div>
            <!--item end-->
        </foreach>

    </aside>
</div>

<script>
    var mySwiper = new Swiper('.topNav', {
        freeMode: true,
        freeModeMomentumRatio: 0.5,
        slidesPerView: 'auto',
    });

    swiperWidth = mySwiper.container[0].clientWidth
    maxTranslate = mySwiper.maxTranslate();
    maxWidth = -maxTranslate + swiperWidth / 2

    // $(".swiper-container").on('touchstart', function (e) {
    //     e.preventDefault()
    // })

    mySwiper.on('tap', function (swiper, e) {

        //	e.preventDefault()

        slide = swiper.slides[swiper.clickedIndex]
        slideLeft = slide.offsetLeft
        slideWidth = slide.clientWidth
        slideCenter = slideLeft + slideWidth / 2
        // 被点击slide的中心点

        mySwiper.setWrapperTransition(300)

        if (slideCenter < swiperWidth / 2) {

            mySwiper.setWrapperTranslate(0)

        } else if (slideCenter > maxWidth) {

            mySwiper.setWrapperTranslate(maxTranslate)

        } else {

            nowTlanslate = slideCenter - swiperWidth / 2

            mySwiper.setWrapperTranslate(-nowTlanslate)

        }

        $(".topNav  .active").removeClass('active')

        $(".topNav .swiper-slide").eq(swiper.clickedIndex).addClass('active')

    })

</script>
<script src="__PUBLIC__/apps/js/imagesloaded.pkgd.min.js"></script>
<script src="__PUBLIC__/apps/js/masonry.pkgd.min.js"></script>
<script src="__PUBLIC__/apps/js/find.js"></script>
</body>
</html>